<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #root {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        flex-wrap: wrap;
      }
    </style>
  </head>
  <body>
    <script>
      let data = {
        name: "张三",
        age: 18,
        car: {
          name: "奔驰",
          color: "红色",
        },
      };

      function Observer(target) {
        if (typeof target !== "object" || target === null) {
          return target;
        }
        for (let key in target) {
          if (typeof target[key] === "object") {
            target[key] = new Observer(target[key]);
          }
          Object.defineProperty(this, key, {
            get() {
              return target[key];
            },
            set(newValue) {
              target[key] = newValue;
              console.log(`${key}属性被修改了，新值为${newValue}`);
            },
          });
        }
      }

      const obs = new Observer(data);

      const vm = {};
      vm._data = data = obs;
      console.log(vm);
    </script>
  </body>
</html>
